<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      html,
      body {
        height: 100%;
      }
      #login-container {
        min-height: 100%;
        width: 100%;
        background-color: #2d3a4b;
        overflow: hidden;
      }
      .login-form {
        position: relative;
        width: 520px;
        padding: 160px 35px 0;
        margin: 0 auto;
        overflow: hidden;
      }
      .title {
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="login-container">
      <el-form ref="loginForm" class="login-form">
        <div class="title-container">
          <div class="title">登录</div>
        </div>
        <el-form-item prop="username">
          <el-input
            ref="username"
            placeholder="用户名"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            ref="password"
            type="password"
            placeholder="密码"
            name="password"
            tabindex="2"
            auto-complete="on"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <el-button type="primary">点击登录</el-button>
      </el-form>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: "#login-container",
      data: function () {
        return { visible: false };
      },
    });
  </script>
</html>
